<template>
	<view class="index">
		<u-navbar title=" " :background="{ background: 'rgba(0,0,0,0)' }" title-color="#5E5046" title-size="32" :is-back="false" :border-bottom="false">
			<view class="slot-wrap align-center" style="padding: 0 32rpx">
				<image src="@/static/pages1/shaixuan.png" style="width: 44rpx; height: 41rpx"></image>
				<image src="@/static/pages1/lishi.png" style="width: 42rpx; height: 42rpx; margin-left: 64rpx"></image>
			</view>
		</u-navbar>
		<view style="padding-top: 100rpx">
			<view class="flex-center1" style="font-weight: 300; font-size: 48rpx; color: #ffffff; margin-bottom: 100rpx">为您找到合适的另一半</view>
			<view class="flex-center1" style="font-weight: 300; font-size: 48rpx; color: #ffffff; margin-bottom: 100rpx">已为你找到符合度高的伴侣</view>
			<view class="flex-center1" style="margin-bottom: 50rpx">
				<view style="width: 560rpx; height: 560rpx; background: rgba(255, 255, 255, 0.1); border: 2rpx solid rgba(255, 255, 255, 0.2)"></view>
			</view>
			<view class="flex-center1" style="margin-bottom: 30rpx">
				<view
					@click="show = true"
					class="flex-center1"
					style="
						font-weight: 600;
						font-size: 32rpx;
						color: #ffffff;
						width: 320rpx;
						height: 84rpx;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 42rpx;
						border: 1rpx solid #ffffff;
					"
				>
					立即匹配
				</view>
				<view
					@click="show = true"
					class="flex-center1"
					style="
						font-weight: 600;
						font-size: 32rpx;
						color: #ffffff;
						width: 320rpx;
						height: 84rpx;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 42rpx;
						border: 1rpx solid #ffffff;
					"
				>
					查看
				</view>
			</view>
			<view class="flex-center1">
				<text style="font-weight: 400; font-size: 28rpx; color: #ffffff">10:43:56后免费,</text>
				<text style="font-weight: 600; font-size: 28rpx; color: #ffffff; letter-spacing: 1px; text-decoration-line: underline">修改我的匹配条件></text>
			</view>
		</view>
		<!-- 测试 -->
		<u-popup v-model="show" mode="center" @close="close">
			<view class="popupVue relative">
				<image src="../../static/index/activity.png" style="width: 292rpx; height: 278rpx; top: 0; z-index: 99" class="absolute-center"></image>
				<view class="popupContent absolute">
					<view class="title fw600 fs36 text-center">提示</view>
					<view class="text-center margin40">
						M是否支付
						<text style="color: #fc132f; font-weight: bold">9.9</text>
						元提前AI天选匹配
					</view>
					<view class="btnVue flex-between margin70">
						<view class="cancel" @click="show = false">取消</view>
						<view class="apply" @click="$tools.navigateTo('/pages1/aiselection/screen')">立即匹配</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false
		};
	},
	methods: {
		close() {
			uni.showTabBar();
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.u-mode-center-box {
	background-color: transparent !important;
}
.popupVue {
	width: 600rpx;
	height: 640rpx;
	.popupContent {
		width: 600rpx;
		height: 540rpx;
		background: linear-gradient(180deg, #f0e9f8, #f0e9f8, #fde5e7, #fbeff1, #fdfafc, #fff);
		left: 0;
		bottom: 0;
		border-radius: 40rpx;
		.title {
			color: #333;
			padding-top: 178rpx;
		}
		.btnVue {
			padding: 0 50rpx;
			.cancel {
				width: 240rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 42rpx;
				border: 1rpx solid #eeeeee;
				color: #999;
				font-weight: 600;
			}
			.apply {
				width: 240rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 42rpx;
				background: #fc132f;
				border-radius: 42rpx;
				color: #fff;
				font-weight: 600;
			}
		}
	}
}
.index {
	width: 100%;
	height: 100vh;
	overflow: auto;
	background: linear-gradient(135deg, #fc132f 0%, #ff9393 49%, #ff7772 100%);
}
</style>
